<template>
  <div class="hotTopic">
    <x-header :left-options="{showBack: true,backText:'热门话题'}" class="headerBox"></x-header>
    <!-- tab -->
    <tab
      v-model="index"
      default-color="#686868"
      active-color="#000"
      custom-bar-width="20px"
      bar-active-color="#1F7AFF"
    >
      <tab-item selected >全部课程</tab-item>
      <tab-item>课程话题</tab-item>
      <tab-item >班级话题</tab-item>
    </tab>
    <swiper
      v-model="index"
      :show-dots="false"
      ref="cateSwiper"
      :min-moving-distance="100"
      @on-get-height="getPageHeight">
      <swiper-item v-for="(item, index) in listContent" :key="index">
        <div class="softwareBox">
          <ul class="softwareListBox clearfix liveBox">
            <li v-for="(item2, index2) in item.softwareList" :key="index2" class="lives">
                <div class='topic'>
                    <div class='topicLeft'>
                        <div class='topicTitle'>#{{item2.title}}#<span class='sign'>{{item2.label}}</span></div>
                        <div class='number'>{{item2.num}}人参与</div>
                    </div>
                    <img :src='item2.img'/>
                </div>
            </li>
          </ul>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import { Tab, TabItem, Swiper, SwiperItem, XHeader } from "vux";
export default {
  components: {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    XHeader
  },
  data() {
    return {
      index: 0,
      listContent: [
        {
          softwareList: [
            {
              title: '麦月小苍尔课程推荐',
              label: '课程',
              num: '45123',
              img: require('../assets/images/chidrens01.png')
            },
            {
              title: '麦月小苍尔课程推荐',
              label: '课程',
              num: '45123',
              img: require('../assets/images/chidrens01.png')
            },
            {
              title: '麦月小苍尔课程推荐',
              label: '课程',
              num: '45123',
              img: require('../assets/images/chidrens01.png')
            }
          ]
        },
        {
          softwareList: [
            {
              title: '麦月小苍尔课程推荐',
              label: '课程',
              num: '45123',
              img: require('../assets/images/chidrens01.png')
            },
            {
              title: '麦月小苍尔课程推荐',
              label: '课程',
              num: '45123',
              img: require('../assets/images/chidrens01.png')
            }
          ]
        },
        {
          softwareList: [
            {
              title: '麦月小苍尔课程推荐',
              label: '课程',
              num: '45123',
              img: require('../assets/images/chidrens01.png')
            },
          ]
        }
      ]
    };
  },
  methods: {
    getPageHeight() {
      let topHeight = document.getElementsByClassName("vux-slider")[0]
          .offsetTop,
        diffHeight = window.screen.height - 44 ;
      this.$nextTick(() => {
        this.$refs.cateSwiper.xheight = diffHeight + "px";
      });
    }
  }
  
};
</script>

<style lang="less" scoped>
.hotTopic {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }

  .liveBox {
    padding: 30px;
    .lives {
      margin-bottom: 20px;
      list-style: none;
      .topic{
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f4f4f4;
            border-radius: 10px;
            margin-bottom:20px;
            .topicLeft{
                padding: 20px;
                .topicTitle{
                    font-size: 34px;
                    font-weight: 600;
                    display:flex;
                    align-items:center;
                    margin-bottom:20px;
                    span{
                        color: #fff;
                        font-size: 16px;
                        padding: 4px 8px;
                        border-radius: 5px; 
                        margin-left: 10px;
                    }
                    .sign{
                        background: #1F7AFF;
                    }
                    .sign2{
                        background: #3ABA46;
                    }
                }
                .number{
                    font-size:28px;
                    color:#959595;
                }
            }
            img{
                width: 150px;
                height: 150px;
            }
        }
    }
  }
}

</style>